<template>
    <div
        class="singer"
        @click="toSinger(item)"
    >
        <div class="cover">
            <div class="image">
                <el-image
                    :src="item.img1v1Url + '?param=200y200'"
                    lazy
                >
                    <div
                        slot="placeholder"
                        class="image-slot "
                    >
                        <p>加载中<span class="dot">...</span></p>
                    </div>
                    <div
                        slot="error"
                        class="image-slot"
                    >
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
            </div>
        </div>
        <div class="info">
            <p class="name">{{ item.name }}</p>
            <p
                class="count"
                v-if="item.musicSize"
            >单曲数{{ item.musicSize }}</p>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    props: {
        item: {
            type: Object
        }
    },
    created() {

    },
    methods: {
        // 跳转歌手页面
        toSinger(item) {
            this.$router.push({
                name: 'singerDetail',
                query: {
                    id: item.id
                }
            })
            this.setSinger(item)
        },
    }
}
</script>

<style lang="less" scoped>
.singer {
    padding: 0 15px 30px;
    flex: 0 0 10%;
    max-width: 10%;
    .cover {
        cursor: pointer;
        .el-image {
            border-radius: 50%;
        }
    }
    .info {
        margin-top: 15px;
        text-align: center;
        .name {
            font-weight: 700;
            font-size: 14px;
            line-height: 18px;
            word-break: break-word;
        }
        .count {
            font-size: 12px;
            margin-top: 10px;
            color: #fa2800;
        }
    }
}
</style>